<template>
  <div class="page bgc-fff">
    <x-header :title="header.title"></x-header>
    <div v-if="classHistoryData.length === 0" class="mt46 f14 pad15 mt20 ta-c c-666">
      该车队暂无司机信息
    </div>
    <v-loadmore v-else :top-method="loadTop" :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded" class="mt46"
      :auto-fill="false" ref="loadmore">
      <div class="add-class-history-item" v-for='(item,index) in classHistoryData' :key='index'>
        <!-- item -->
        <div class="f14 c-333 bgc-fff pad15">
          <div class="flex l-center a-between">
            <div>
              <span class="c-999">姓名：</span>
              <span v-if='item.name'>{{item.name}}</span>
              <span v-else>暂无</span>
            </div>
            <div>
              <span class="c-999">电话：</span>
              <span v-if="item.mobile">{{item.mobile}}</span>
              <span v-else>暂无</span>
            </div>
          </div>
        </div>
        <!-- 间隔 -->
        <div class="mo-spacing"></div>

      </div>
    </v-loadmore>
    <v-loading v-show="loadingShow"></v-loading>
  </div>
</template>

<script>
import * as FleetApi from '@/api/fleet'
import { XHeader } from 'vux'
import { Toast, Loadmore } from 'mint-ui'
import Loading from '@/components/common/loading/loading'
import * as SessionS from '@/utils/store/storage'
export default {
  name: 'me-fleetDriverList',
  data() {
    return {
      header: {
        title: ''
      },
      staticImgData: {
        timeUrl: require('@/assets/image/v1/user/add_class_history/icon_time.png')
      },
      classHistoryData: [],
      page: {
        current: 1,
        size: 10,
        total: 1,
        condition: {
          fleetId: ''
        }
      },
      loadingShow: false,
      allLoaded: false, // 是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      scrollMode: 'auto' // 移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
    }
  },
  created() {
    const { id, fleetName } = SessionS.getSession('fleetItem')
    this.page.condition.fleetId = id
    this.header.title = fleetName
    this.loadPageList()
  },
  mounted() {
  },
  components: {
    XHeader,
    'v-loading': Loading,
    'v-loadmore': Loadmore
  },
  methods: {
    loadTop: function() { // 组件提供的下拉触发方法
      // 下拉加载
      this.loadingShow = true
      this.allLoaded = false// 刷新时置为true
      this.page.current = 1// 从第1页开始
      this.loadPageList()
      this.$refs.loadmore.onTopLoaded() // 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom: function() {
      // 上拉加载
      this.loadingShow = true
      this.getMore() // 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded() // 固定方法，查询完要调用一次，用于重新定位
    },
    loadPageList: function() {
      // 查询数据
      const that = this
      that.loadingShow = true
      FleetApi.fleetDriverList(that.page).then(res => {
        // 是否还有下一页，加个方法判断，没有下一页要禁止上拉
        if (res.code === 0) {
          that.classHistoryData = res.data.records
          if (that.page.current > 1) {
            that.isHaveMore(res.data)
          }
          that.loadingShow = false
        } else {
          console.warn('error', res)
          that.loadingShow = false
        }
        that.$nextTick(function() {
          that.scrollMode = 'touch'
        })
      }).catch(res => {
        this.loadingShow = false
        console.warn('error', res)
      })
    },
    getMore: function() {
      // 分页查询
      const that = this
      that.page.current = parseInt(that.page.current) + 1
      FleetApi.fleetDriverList(that.page).then(res => {
        this.loadingShow = false
        if (res.code === 0) {
          that.classHistoryData = that.classHistoryData.concat(res.data.records)
          if (that.page.current > 1) {
            that.isHaveMore(res.data)
          }
        }
      }).catch(res => {
        this.loadingShow = false
        console.warn('error', res)
      })
    },
    isHaveMore: function(data) {
      // 是否还有下一页，如果没有就禁止上拉刷新
      const that = this
      const now_show_num = that.classHistoryData.length
      const get_total = data.total
      if (now_show_num < get_total) {
        // 展示的条数 小于 后端总条数 还可以下拉加载更多
        this.allLoaded = false
      } else if (now_show_num === get_total) {
        // 展示的条数 等于 后端总条数 没有更多数据 不能进行下拉加载
        this.allLoaded = true
        Toast({
          message: '没有更多数据了',
          duration: 1000
        })
      }
    }
  }
}
</script>

<style scoped>
@import '../../styles/util.css';
/* common */
.page{
  overflow-y: auto;
}
</style>
